FTUX v2: Guided workflows with polished layout and accessibility#5
Open
dellis317 wants to merge 1169 commits into
Open
FTUX v2: Guided workflows with polished layout and accessibility#5dellis317 wants to merge 1169 commits into
dellis317 wants to merge 1169 commits into
Conversation
Remove the entire "locked" concept from folders and documents: - Server: remove locked guards from rename/move/delete endpoints, stop setting locked=true on synced docs, simplify findOrCreateFolder - StoragePanel: remove lock icons, enable drag/rename/delete on all items - Workspace: remove lock icon from folder breadcrumbs - ContextCapturePanel: remove lock icon from folder tree - Schema: update comment on Chat to Context folder reference All folders (Applications, Personas, Chat to Context) and their documents are now regular user items that can be freely renamed, moved, or deleted. https://claude.ai/code/session_0113TYCpbjL9ydzG71utuk59
…FWjB Remove locked folder/document system — all items are user-manageable
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: ce7b1623-6de4-4bf4-ae15-2af4b2322308 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 254cb815-af2d-42bf-9178-2257909742bc Replit-Helium-Checkpoint-Created: true
- Rename "Transcript" tab to "Notes" across UI (appWorkspaceConfig, tab icons) - Rewrite TranscriptPanel as note management panel with individual NoteEntry cards - Each note has save-to-context, merge-to-document, and delete buttons - Add "Save to Context" button on document ReadingPane toolbar - Update Workspace state from single transcriptText string to NoteEntry[] array - Voice transcripts now create individual note entries instead of appending text - Fix ProvokeText container chrome bottom padding (pb-2 → pb-3 pt-1) to prevent actions/metrics overlapping the border in Objective layout - Add CSS rules to keep AIQA QA overlay on top with max z-index - Add new tracking events: note_saved_to_context, document_saved_to_context, etc. https://claude.ai/code/session_01Hedsby8HwCwRbZiAmRwKKU
- Add effectiveObjective fallback so /api/write works when objective is empty - Replace bare objective with effectiveObjective in all API calls (write, interview/question, interview/summary, generate-advice, discussion/ask, streaming/wireframe-analysis, chat/summarize, chat/stream, chat/save-session) - Remove the New button, its handler, confirmation dialog, and AlertDialog imports https://claude.ai/code/session_01FYT4U7DJck8qHcU5mNwJbq
…9CaN Convert Transcript panel to Notes management with save-to-context
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: a8627a73-9ca1-4855-96d7-edc073a8103a Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: d1e318de-f3b8-429d-aac2-97284b423e3b Replit-Helium-Checkpoint-Created: true
…ion-NBodc Remove AlertDialog import and "New" button from Workspace
Cross-referenced all 104+ backend route definitions in server/routes.ts against every API call in client/src/ to identify 23 endpoints with no frontend callers, plus 11 dead replit_integration routes that are never imported. Categorized findings with line references and recommendations. https://claude.ai/code/session_01DMfrwF7RvaQtBFQkoqER16
Add unused API endpoint analysis
- Add pinned quick-add input at top of Notes panel with border, background, mic and submit buttons for better visual delineation - Revert ProvokeText container chrome padding change (pb-3 pt-1 → pb-2) to preserve consistent layout across all panels - Remove showWordCount/showReadingTime overrides on Objective (all ProvokeText must have the same button set per ADR) - Auto-scroll to latest note when new notes are added - Empty state shows hint text without redundant add button https://claude.ai/code/session_01Hedsby8HwCwRbZiAmRwKKU
…LAUDE.md Notebook UI changes: - Rename "Transcript" tab to "Notes" in NotebookRightPanel - Add save-to-context-store button on each note card (save icon → green check) - Improve "Add a note" input delineation with bordered input area + background - Update all "Send to Transcript" / "Accept → Transcript" labels to "Notes" across ProvoThread, NotebookResearchChat, and TranscriptPanel - Update toast messages and empty state text to use "notes" terminology CLAUDE.md update (notebook refactor): - Add NotebookWorkspace as primary orchestrator (3-panel layout) - Document all 12 notebook/ components and bschart/ components - Add new templates: gpt-to-context, bs-chart, query-editor - Add Research Chat and User-to-User Messaging API endpoints - Add routing table (/, /app/:templateId, /store, /admin, /pricing) - Add database tables (connections, conversations, messages, chatPreferences) - Update state management docs for context pinning and captured context - Update workspace layout types to include research-chat and bs-chart https://claude.ai/code/session_01Hedsby8HwCwRbZiAmRwKKU
…9CaN Claude/transcript to notes j9 ca n
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 44c7d436-5868-4396-9692-b2e68bf99bd8 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: de91d4bb-4509-45cc-bec2-00b09ad8fdd5 Replit-Helium-Checkpoint-Created: true
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 19e6dcfe-e742-4fda-a95f-88f212d5e8b5 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 30130edd-b3f0-48bc-9484-b3c9683c1318 Replit-Helium-Checkpoint-Created: true
The AIQA QA overlay disappears when clicked because Radix UI's DismissableLayer (used by Dialog, Popover, DropdownMenu) listens for pointerdown/mousedown events on the document. When a click on the AIQA widget bubbles up, Radix treats it as an "outside click" and dismisses any open overlay — which can interfere with the AIQA widget's own state. Fix: Add a MutationObserver-based script that shields all AIQA-injected DOM elements by stopping propagation of pointer/mouse/click/focus events in the capture phase, preventing them from reaching Radix's global listeners while still allowing AIQA's own event handlers to work normally. https://claude.ai/code/session_01Hedsby8HwCwRbZiAmRwKKU
Pressing Enter on the delete document/folder modal now triggers the delete action, matching the expected keyboard interaction pattern. https://claude.ai/code/session_01E88QoBRE7XrPiXiciMwSCB
…9CaN Fix AIQA widget disappearing on click by stopping event propagation
Move the "Add Notes" label inside the card as a proper header with icon, voice recorder, and send button. Increase the textarea from 1 to 3 minimum rows for a more substantial input area. https://claude.ai/code/session_01E88QoBRE7XrPiXiciMwSCB
…modal-oEZGJ Redesign note input UI and improve delete dialog keyboard handling
…licate creation - Drag-and-drop: folders and documents in Context Store are now draggable and can be nested into folders (up to 10+ levels deep). Dropping on empty space moves items to root. Backend cycle detection prevents invalid moves. - Upload moved to Session Context: upload button is now in the Session Context header. Uploaded files are auto-pinned to the session for immediate use. - Fix duplicate creation: guard create mutations with isPending check so rapid Enter presses no longer create multiple documents/folders. - First-tier folders are fully left-aligned (0px indent at depth 0). - Tree indentation scales gracefully to 10+ nesting levels. https://claude.ai/code/session_01CaMDQqpQAAuhQCDzo1RKFF
…ers-QCkcz Add drag-and-drop support and improve Context Sidebar UX
Add note explaining that npm install must run before npm run check or npm run build, otherwise TypeScript reports false errors about missing type definitions for node and vite/client. https://claude.ai/code/session_01CaMDQqpQAAuhQCDzo1RKFF
…ers-QCkcz Update CLAUDE.md: document npm install requirement before type checking
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 22918bb7-9ef2-4863-92c8-027e26235b3a Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: b9443e8e-e7d7-49d4-ae66-8d16aa0fb97d Replit-Helium-Checkpoint-Created: true
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 055ddedc-3df6-4bc3-9455-f9dd4684487f Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 8c557c6e-683d-46c4-b4a4-9412733795e1 Replit-Helium-Checkpoint-Created: true
Switch objective ProvokeText from chrome="container" to chrome="inline" to remove the heavy bordered card wrapper that was causing buttons to be hidden. Reduce padding, icon sizes, and gap values. Remove the fixed h-[20%] height constraint so the panel sizes naturally to its content with minRows/maxRows on the textarea. https://claude.ai/code/session_01AFq3zHzrNbe5xG2txP4SSj
Move the message count + Clear button header out of the ScrollArea and into a fixed shrink-0 header above it. This keeps the Clear action always visible regardless of scroll position. https://claude.ai/code/session_01AFq3zHzrNbe5xG2txP4SSj
- Add 4 research focus modes: Explore, Verify, Gather, Analyze - Rewrite buildResearchAssistantPrompt with source hierarchy, trust signals, freshness mandates, and chain-of-thought reasoning - Add focus-specific prompt sections that steer assistant behavior - Add focus mode selector pills in Research chat header - Wire researchFocus through chatRequestSchema to /api/chat/stream https://claude.ai/code/session_01AFq3zHzrNbe5xG2txP4SSj
- Add Save button that stores document + objective to Context Store (objective embedded as blockquote header in content) - Add Evolve button that triggers /api/write with the selected smart button mode (Expand/Condense/Restructure/Clarify/Style) - Wire smart button sub-options to call onEvolve with instruction type - Thread onSaveToContext, onEvolve, isSaving, isEvolving props through NotebookCenterPanel to SplitDocumentEditor - Update CLAUDE.md: always fix pre-existing TypeScript errors https://claude.ai/code/session_01AFq3zHzrNbe5xG2txP4SSj
Fix recurring Drizzle migration noise from duplicate UNIQUE constraints
Add docType column (document, image, timeline, chart, note) to the documents table and wire it through the full stack: Drizzle schema, ensureTables, save/list API, and all client save paths. ContextSidebar now shows type-specific icons with distinct colors — Image (violet), Clock/timeline (amber), BarChart3/chart (blue), StickyNote/note (green), FileText/document (default gray). https://claude.ai/code/session_01AJKpY5SRV8z5tKA7Cn5abC
- Save to Context now persists timeline as a real document in the Context Store (via POST/PUT /api/documents) instead of just adding to ephemeral notes. Subsequent saves update the same document. - Event dates now display dynamically based on granularity: year-only dates show just the year, month-precision shows "Jun 2024", day shows full date, and time-precision includes hours. Dates within a group header suppress redundant info (e.g. events in a "2024" group show "Jun 15" not "Jun 15, 2024"). - Auto-zoom picks the best zoom level (decades/years/months/days) based on the time span of events, triggered when events first load or after bulk imports (5+ new events). https://claude.ai/code/session_01Md7X6uF47doGetoRBezSQ9
…9O3z Fix timeline Save to Context and dynamic date display
…xt-N0P2h Add document type icons to Context Store sidebar
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 5f00556b-8c23-4ce5-a281-d6ba30c78178 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 288c7509-a478-4200-9cf1-7e29f0893f92 Replit-Helium-Checkpoint-Created: true
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 6de65017-3ef4-48dc-981b-0d6fabc8ec1a Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 2404fadc-3e62-465e-bbba-2b7c19676717 Replit-Helium-Checkpoint-Created: true
Instruments fetch, script injection, DOM mutations, window.AIQA methods, and button visibility to trace exactly why the overlay vanishes on click. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: ba59469f-a10d-4d61-b2af-acd15d0c98c1 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 2f2b686f-9b8d-4d6f-bf7b-8ad5a4cb3fb0 Replit-Helium-Checkpoint-Created: true
The overlay loads and initializes correctly but renders behind the app's fixed/absolute elements (z-50). Force aiqa-overlay-root to max z-index. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Override overlay root to fixed position within viewport (right panel, full height). Add computed style + bounding rect logging to debug. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 1307f9d0-c5c7-4f04-9572-dec77eba62e6 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 65cf3f55-8387-425f-bac5-6ac528449cb3 Replit-Helium-Checkpoint-Created: true
Minimal CSS (z-index + red outline) to see where overlay renders. Dumps full outerHTML, computed styles, bounding rects for root and all children to pinpoint visibility issue. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: c6073ffb-0846-4bb0-a0e2-d1853f591b30 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 4062ee08-4de1-4333-896b-e62d6758f6d7 Replit-Helium-Checkpoint-Created: true
Overlay root was rendering as a tiny element in bottom-right corner. Override to fixed center position, 460x80vh, with indigo border and white background so it's unmissable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 20ddde18-c833-44fe-ab8e-a6fbbced00f0 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 661658e0-5961-40d2-82b9-6690326e7bc3 Replit-Helium-Checkpoint-Created: true
Remove forced CSS overrides (were breaking overlay rendering). Track every child added/removed inside overlay-root, attribute changes, shadow roots, iframe srcs, and script errors from overlay.js. Dumps full element tree with computed styles at 2s and 5s after init. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 00a3cf43-3e91-42c1-aa48-686fdf8fc64a Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: c5d727cb-2aab-421b-81b7-8daf6c37b187 Replit-Helium-Checkpoint-Created: true
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 9f80349f-b9b8-476a-99cb-a2d156413a0e Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: cb989eb5-15fb-4528-8c8b-2d769bd3aa16 Replit-Helium-Checkpoint-Created: true
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Voice transcription now uses the browser's built-in Web Speech API as the primary method (free, real-time, no API key needed). Server-side transcription is only used when the browser lacks Web Speech support. Also adds Critical Rules to CLAUDE.md: - No OPENAI_API_KEY — use GEMINI_API_KEY - Browser-first for all voice/media capture Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: afdfe735-5224-43d1-8a09-d3c21c74cbd2 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: b387d098-e666-4552-9e52-2a0e6a25bbe1 Replit-Helium-Checkpoint-Created: true
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: de733278-94fb-4417-ba7b-11f03c759b39 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: c19a434d-5df5-44ae-afb8-b57646980a10 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c2b10803-d37e-4344-a703-d35a86802e35/de733278-94fb-4417-ba7b-11f03c759b39/t2zuEkz Replit-Commit-Deployment-Build-Id: 4cc1ac04-7a8c-454f-86c1-6f954feb1273 Replit-Helium-Checkpoint-Created: true
… PeerChat - Enhance LlmCallPreview header to show Provider / Model Label / Tier instead of raw model ID (useActiveModelInfo hook fetches full model info) - Wrap 7 remaining LLM buttons with LlmHoverButton for ADR compliance: InfographicStudio (Clean Summary, Artistic Summary), TimelineWorkspace (Discover Era), DraftQuestionsPanel (Tailor), InterviewTab (Start Interview, Summary, Podcast) - Replace hardcoded bs-chatt.replit.app Video iframe with proper PeerChat integration (peerchat.app) using embed params, Clerk user name, Provocations branding, and lazy iframe mounting Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
New workspace layout using progressive disclosure: a floating dock, status bar, hamburger menu, and single-pane content area replace the 3-column resizable layout for a beginner-friendly experience. - Extract useWorkspaceState hook from NotebookWorkspace (shared state) - Add FtuxShellProvider context for dock/status bar/tips configuration - Create 11 FTUX components (Shell, StatusBar, Dock, HamburgerMenu, ContentArea, ToolWrappers, DocumentTabBar, NotesPanel, DidYouKnow, BreadcrumbStepper, SettingsDialog) - Add ftuxShellConfig column to preferences (dual schema ADR) - Add 25 rotating tips across 4 categories - Add FTUX CSS variables and animation keyframes - Existing workspace at / remains completely untouched Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Preserved as NotebookWorkspace.original.tsx (978 lines) in case the useWorkspaceState refactor needs to be reverted. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Transform the FTUX desktop shell from a placeholder skeleton into a functional guided workspace. Users now choose an output type (Blog Post, Infographic, PRD, Timeline, Research Paper) and are guided through Gather → Workshop → Build steps using real workspace components (ContextSidebar, SplitDocumentEditor, NotebookResearchChat, InterviewTab, ProvoThread, ArtifyPanel, BSChartWorkspace, TimelineWorkspace). Key changes: - Replace Tools/Applications menu with Gather/Workshop/Build taxonomy - Add landing cards for output-type selection - Add 3-step guided workflow with breadcrumb stepper and Next/Back nav - Dock: group separators, optional labels, background color presets - Status bar: render pinned items, translucency/color controls - Tips: "Hide this visit" session dismiss, translucency/color - Settings: color presets, label toggles, translucency sliders for all panels - Tour modal: 5-step onboarding with replay from settings - Backward-compatible config parsing (new fields default gracefully) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…rails Layout: Rewrite landing cards as 3-visible carousel with 6th card (Slide Deck) and shuffle-on-mount. Anchor Did You Know to dock edge. Add dock clearance padding and z-index fix for step navigation. Animations: Reduce dock auto-hide delay (2s → 800ms). Add directional slide transitions on workflow step changes. Improve tip rotation with slide+fade effect. Accessibility: Add keyboard navigation (arrow keys) for carousel and tour modal. Add Escape to dismiss tour. Add aria-labels, aria-current, roles, and aria-live regions across all interactive FTUX components. UX guardrails: Confirm before exiting workflow past step 0. Add mobile fallback badge for hidden pinned status bar items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Files changed (10)
FtuxLandingCards.tsx— Carousel rewrite with 6th card, shuffle, keyboard nav, ARIAFtuxContentArea.tsx— Directional step slide animations, dock clearanceFtuxDidYouKnow.tsx— Dock-anchored positioning, slide+fade rotationFtuxDock.tsx— Faster auto-hide, aria-labels on itemsFtuxTourModal.tsx— Escape/arrow key handling, focus management, dialog roleFtuxStepNavigation.tsx— Nav landmark, z-index fix, contextual aria-labelsFtuxBreadcrumbStepper.tsx— Exit confirmation, slide-deck label, nav landmarkFtuxStatusBar.tsx— Mobile pinned items badge, aria-labelsFtuxHamburgerMenu.tsx— Hamburger trigger aria-labelftux-shell-context.tsx— Added slide-deck OutputTypeTest plan
/ftux— landing cards show 3 at a time, arrows cycle with slide animation, left/right arrow keys worknpm run checkpasses with zero errors🤖 Generated with Claude Code